<div class="p-3 bg-white">
  <h3 class="m-0">File Browser</h3>
</div>
<div class="p-3 relative pb-1" oc-lazy-load="['/js/controllers/app.filebroswer.js']">
  <div ng-controller="FileBrowserController">
    <ul class="nav nav-tabs nav-line mb-3 flex" role="tablist">
      <li class="nav-item"><a class="nav-link active" type="" ng-click="folder($event)">全部</a></li>
      <li class="nav-item"><a class="nav-link" type="image" ng-click="folder($event)">图片</a></li>
      <li class="nav-item"><a class="nav-link" type="audio" ng-click="folder($event)">音频</a></li>
      <li class="nav-item"><a class="nav-link" type="video" ng-click="folder($event)">视频</a></li>
      <li class="nav-item"><a class="nav-link" type="application" ng-click="folder($event)">文档</a></li>
    </ul>
    <div class="row row-gap-1 relative {{loading}}">
      <div class="loader bg-app"><i class="fa fa-spinner"></i></div>
      <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2" ng-repeat="file in page.items track by file.id">
        <div style="background-image: url({{file.url}})" class="file-item {{file.mimetype.split('/')[0]}}">
          <label class="ui-checkbox lg inverse text-success">
            <input type="checkbox" ng-click="select(file, $event)"><i></i>
          </label>
          <span class="btn-play play" ng-click="play(file, $event)">
            <span class="btn-play-ring"></span>
          </span>
          <i class="fa fa-file-archive-o text-primary"></i>
          <span class="overlayer"></span>
          <span class="info px-2">
            <span class="text-white text-truncate" title="{{file.filename}}">{{file.filename}}</span>
            <span class="float-right">{{file.size | filesize}}</span>
          </span>
        </div>
      </div>
    </div>
    <nav class="navbar navbar-fixed-bottom bg-faded bt-l nav-pusher row-gap-1">
      <div id="loading-bar" class="mb-3px hide">
        <div class="bar absolute" style="width: 33%">
          <div class="peg"></div>
        </div>
      </div>
      <div class="col-md-4 hidden-sm-down dropup">
        <button type="button" class="btn rounded" data-toggle="dropdown" ng-show="selected_size" title="更多操作">
          <i class="fa fa-ellipsis-v"></i>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" data-toggle="modal" data-target="#bottom"><i class="fa fa-link"></i> 查看链接 ({{selected_size}})</a>
          <div class="dropdown-divider"></div>
          <a href class="dropdown-item text-danger" ng-click="delete()"><i class="fa fa-trash"></i> 删除 ({{selected_size}})</a>
        </div>
        <button class="btn rounded {{selected_size ? 'btn-danger' : ''}}" ng-disabled="!selected_size" ng-click="delete()">
          <i class="fa fa-trash"></i> 删除 <span ng-show="selected_size">({{selected_size}})</span>
        </button>
      </div>
      <div class="col-sm-6 col-md-4 font-md-center">
        <label class="btn rounded btn-success mb-0">
          <i class="fa fa-cloud-upload"></i> 上传
          <input type="file" class="hide" multiple onchange="angular.element(this).scope().file_change(this)">
        </label>
      </div>
      <div class="col-sm-6 col-md-4 text-sm-right">
        <button class="btn btn-secondary rounded {{page.firstPage ? 'hidden' : ''}}" ng-click="paging(page.prevPageNumber)">上一页</button>
        <button class="btn btn-secondary rounded {{page.lastPage ? 'hidden' : ''}}" ng-click="paging(page.nextPageNumber)">下一页</button>
      </div>
    </nav>
    <div class="modal fade black-overlay" id="bottom">
      <div class="bottom bg-white px-3 py-3 bt-l font-md-center ">
        <h3 class="font-thin mb-3 text-info">文件链接</h3>
        <dl class="row mb-0" ng-repeat="file in selected">
          <dt class="col-sm-6 font-md-right">{{file.filename}}</dt>
          <dd class="col-sm-6 font-md-left">{{file.url}}</dd>
        </dl>
      </div>
    </div>
  </div>
</div>
